<template>
	<scroll-view scroll-y @scrolltolower="scrolltolower">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view>
			<view class="back">
				<u-icon name="arrow-left" color="#fff" size="40" @click="back"></u-icon>
			</view>
		</view>
		<view class="top">
			<image src="../../static/myBargain/kjdz.png" mode="widthFix"></image>
			<view class="Show">
				<image src="../../static/bargain/key.png"></image>
			</view>
		</view>
		<view class="center">
			<view class="Normal">
				<view class="non">
					<view class="top">
						<view class="time">
							<view class="cn">
								距结束
							</view>
							<countdown :endTime="overTime" :startTime="nowTime"  @overTime="delTime"/>
						</view>
					</view>
					<view class="foot1">
						<view class="text">
							已砍<span class="sp1">{{cmoney}}元,</span> 免费仅差<span class="sp2">{{price - cmoney}}元</span>
						</view>
						<view class="again" @click="yaoq">
							立即邀请
						</view>
					</view>
				</view>
				<view class="non1">
					<view class="top">
						<view class="title">
							砍价记录
						</view>
					</view>

					<view class="foot1" v-for="(item,index) in kjList">
						<view class="text">
							<view class="img">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="name">
								{{item.userName}}
							</view>
							<view class="cont">
								砍掉了{{item.money}}元
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="qrimg">
					   <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val"
					   :size="size" :unit="unit" :background="background" :foreground="foreground"
					    :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" 
					    :loadMake="loadMake" :usingComponents="true" />
					</view>
					<view class="sao">邀请好友扫一扫即可帮我砍价</view>
				</view>
			</view>
		</u-mask>
		<canvas canvas-id="qrcode" v-if ="url == '' " style="opacity: 1;"></canvas>
	</scroll-view>
</template>

<script>
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import{kjjl}from"../../api/product.js"
	export default {
		data() {
			return {
				overTime:"",
				nowTime:"",
				id:'',
				cmoney:'',
				price:"",
				show:false,
				num:1,
				kjList:[],
				
				url:"",
				ifShow:true,
				val: '', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#333333', // 前景色
				pdground: '#333333', // 角标色
				icon: '', // 二维码图标
				iconsize: 170, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64
				recommendCode:''
			};
		},
		components:{countdown,tkiQrcode},
		onLoad(e) {
			this.overTime=e.otime
			this.nowTime=e.ntime
			this.id=e.id
			this.cmoney=e.cmoney
			this.price=e.price
			this.getInfo()
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			yaoq(){
				this.val="http://vsh5.bxwhl.com/#/pages/bargain/bargainCon?id="+this.id
				this.show=true
			},
			async getInfo(){
				let res=await this.get(kjjl,{taskId:this.id,pageSize:10,pageNum:this.num})
				this.num++
				this.kjList=[...this.kjList,...res.data.list]
			},
			scrolltolower(){
				this.getInfo()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.sao{
		font-size: 30rpx;
		margin-top: 40rpx;
		color: #F0812D;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 500rpx;
		height:600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 50rpx;
	}
	.back{
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	scroll-view{
		background-image: -webkit-linear-gradient(-90deg, #502DE3 0%, #FFD783 100%);
		height: 100vh;
	}

	//隐藏框1
	.payment1 {
		position: absolute;
		width: 80%;
		height: 50%;
		top: 30%;
		left: 10%;
		padding: 15upx;
		box-sizing: border-box;
		//background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
		// border: 1px solid #F3F3F3;
		border-radius: 10px;
		box-shadow: 0 0 100vh 100vh rgba(0, 0, 0, 0.5);
		z-index: 10;

		.tpp1 {
			position: relative;
			// background:linear-gradient(180deg,rgba(255,113,113,1) 0%,rgba(255,0,0,1) 100%);
			width: 100%;
			height: 100%;
			border-radius: 10px;

			// margin: 10upx;
			//border: 1px solid rgba(255,220,109,1);
			.ff {
				position: absolute;
				width: 400upx;
				color: #FFFFFF;
				bottom: 50upx;
				left: 90upx;
				font-size: 12px;
			}

			.erwei {
				position: absolute;
				width: 330upx;
				height: 330upx;
				padding: 10upx;
				top: 280upx;
				left: 120upx;
				background-color: #FFFFFF;
				border-radius: 10px;

				image {
					width: 100%;
					height: 100%;

				}
			}

			.sao {
				color: #FFFFFF;
				position: absolute;
				top: 200upx;
				left: 120upx;
				letter-spacing: 1px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-size: 16px;
			}

			.tex {
				color: #FFFFFF;
				position: absolute;
				top: 64upx;
				left: 220upx;
				width: 260upx;
				letter-spacing: 1px;
				font-family: PingFangSC-Regular, PingFang SC;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.con {
				position: absolute;
				top: 40upx;
				left: 80upx;
				width: 106upx;
				height: 106upx;
				border-radius: 50%;
				background-color: #FFFFFF;

				image {
					width: 60upx;
					height: 80upx;
					position: absolute;
					left: 22upx;
					top: 15upx;
					// border-radius: 50%;
				}
			}

			.del {
				position: absolute;
				right: 25upx;
				top: 25upx;
				width: 30upx;
				height: 30upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	//砍价进行
	.Normal {
		// margin-top: 30upx;
		// margin-left: 30upx;
		width: 100%;
		// height: 1000upx;
		padding: 30upx;
		background-color: #E0413100;

		.non1 {
			width: 100%;
			// height: 400upx;
			background-color: #FFFFFF;
			border-radius: 24upx;
			margin-bottom: 30upx;

			.top {
				position: relative;
				width: 100%;
				height: 100upx;
				background: #FFE24E;
				border-radius: 12px 12px 0 0;
				margin-top: 40rpx;

				.jilu {
					position: absolute;
					display: inline-block;
					top: 35upx;
					left: 200upx;
					width: 28upx;
					height: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 36upx;
					font-weight: 600;
					color: #4925FC;
					display: inline-block;
				}

				.jilu1 {
					position: absolute;
					display: inline-block;
					top: 35upx;
					left: 460upx;
					width: 28upx;
					height: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.foot1 {
				width: 100%;

				// height: 300upx;
				.text {
					position: relative;
					width: 100%;
					height: 100upx;

					// background-color: #FF0000;
					.img {
						position: absolute;
						top: 20upx;
						left: 20upx;
						width: 68upx;
						height: 68upx;
						line-height: 100upx;
						border-radius: 100%;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.img1 {
						position: absolute;
						top: 15upx;
						left: 420upx;
						width: 46upx;
						height: 46upx;
						line-height: 100upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						position: absolute;
						letter-spacing: 1px;
						top: 50%;
						left: 200upx;
						transform: translate(-50%, -50%);
						max-width: 190upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 30upx;
						color: #515151;
					}

					.cont {
						position: absolute;
						top: 22upx;
						left: 450upx;
						color: #333;
						font-size: 30upx;
					}
				}
			}

		}

		.non {
			width: 100%;
			height: 447upx;
			background: radial-gradient(circle, #FFFBF1 0%, #F4E5C0 100%);
			border-radius: 12px;
			margin-bottom: 30upx;

			.foot1 {
				width: 100%;
				height: 300upx;
				position: relative;

				.again {
					position: absolute;
					width: 420upx;
					height: 70upx;
					left: 150upx;
					bottom: 40upx;
					background-image: linear-gradient(to left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
					border-radius: 30px;
					color: #FFFFFF;
					text-align: center;
					line-height: 70upx;
				}


				.text {
					position: absolute;
					left: 170upx;
					top: 30upx;
					// margin-top: 50upx;
					color: #000000;
					font-size: 30upx;
					float: right;

					span {
						margin-left: 7upx;
						margin-right: 7upx;
						color: #FF0000;
						font-weight: bolder;
					}

				}

				.tiao {
					position: absolute;
					top: 120upx;
					left: 170upx;
					width: 380upx;
					height: 20upx;
					border-radius: 10px;
					background-color: #FFB6B6;

					.tiao1 {
						width: 360upx;
						height: 100%;
						border-radius: 10px;
						background-color: #E00000;
					}
				}
			}

			.top {
				position: relative;
				width:500upx;
				height: 100upx;
				background: #FFFFFF;
				border-radius: 0 0 12upx 12upx;
				margin-left: 100upx;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;
				.time {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 500upx;
					position: absolute;
					font-size: 30rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}

	//头部图片
	.top {
		position: relative;
		width: 100%;
		height: 380upx;
		margin-top: 40rpx;

		//background:linear-gradient(360deg,rgba(255,0,0,1) 0%,rgba(255,60,60,1) 100%);
		// background-color: #000000;
		// margin-bottom: 20upx;
		image {
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0px;

		}

		.Show {
			position: absolute;
			top: 30upx;
			width: 220upx;
			height: 220upx;
			left: 50%;
			transform: translate(-50%);
			border-radius: 100%;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
